<template>
  <el-dialog title="菜单" :visible.sync="showDialog" @close="btnCancel">
    <!-- 表单 -->

    <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="菜单类型" prop="permission_name">
        <el-radio-group v-model="radio1">
          <el-radio-button label="菜单" />
          <el-radio-button label="按钮" />
        </el-radio-group>
      </el-form-item>
      <div v-if="radio1==='菜单'">
        <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="菜单名称" prop="permission_name">
            <el-input v-model="formData.permission_name" style="width:90%" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item label="菜单地址" prop="route">
            <el-input v-model="formData.route" style="width:90%" placeholder="请输入路由地址，以/开头" />
          </el-form-item>
          <el-form-item label="组件地址" prop="component">
            <el-input v-model="formData.component" style="width:90%" placeholder="请输入组件路径地址，不以/开头" />
          </el-form-item>
          <el-form-item label="权限标识" prop="permission_mark">
            <el-input v-model="formData.permission_mark" style="width:90%" placeholder="格式：controller@action" />
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <!-- <el-input v-model="formData.icon" style="width:90%" placeholder="点击选择图片" /> -->
            <template>
              <!-- <el-select v-model="value" clearable placeholder="点击选择图片"> -->
              <el-popover
                ref="popover"
                placement="right"
                width="500"
                trigger="focus"
              >
                <IconSelect @selected="IconSelect" />
              </el-popover>
              <el-input
                v-model="formData.icon"
                v-popover:popover
                class="elInput"
                placeholder="请选择图标"
                @focus="isShowfocus"
              />

              <!-- </el-select> -->
            </template>
          </el-form-item>
          <el-form-item label="Redirect" prop="redirect">
            <el-input v-model="formData.redirect" style="width:90%" placeholder="请输入Redirect" />
          </el-form-item>
          <el-form-item label="是否外链" prop="islink">
            <el-radio-group v-model="formData.islink">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <template>
              <el-input-number v-model="formData.sort" :min="1" :max="100" @change="handleChange" />
            </template>
          </el-form-item>
          <el-form-item label="Hidden" prop="hidden">
            <el-radio-group v-model="formData.hidden">
              <el-radio :label="1">否</el-radio>
              <el-radio :label="2">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="KeepAlive" prop="keepalive">
            <el-radio-group v-model="formData.keepalive">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <div v-else>
        <el-form-item label="按钮名称" prop="permission_name">
          <el-input v-model="formData.permission_name" style="width:90%" placeholder="请输入按钮名称" />
        </el-form-item>
        <el-form-item label="权限标识" prop="permission_mark">
          <el-input v-model="formData.permission_mark" style="width:90%" placeholder="格式：controller@action" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <template>
            <el-input-number v-model="formData.sort" :min="1" :max="100" @change="handleChange" />
          </template>
        </el-form-item>
      </div>
    </el-form>

    <el-row slot="footer" type="flex" justify="end">
      <el-col>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="showDialog=false">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { addcaidanlist } from '@/api/menu'
import { getInfo } from '@/api/user'
export default {
  name: 'Addcaidan',
  data() {
    const checkName = async(rules, value, cb) => {
      let isRepeat = false
      if (this.formData.parent_id) {
        if (this.radio1 === '菜单') {
          // console.log(this.radio1)
          isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id)
            .some(item => item.permission_name === value)
        } else {
          // console.log(this.radio1)
          isRepeat = this.annu.filter(item => item.id !== this.formData.id)
            .some(item => item.permission_name === value)
        }
      }
      return isRepeat ? cb(new Error(`同级已经存在${value}这个名称`)) : cb()
    }
    const checkmark = async(rules, value, cb) => {
      let isRepeat = false
      if (this.formData.parent_id) {
        if (this.radio1 === '菜单') {
          console.log(this.radio1)
          isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id)
            .some(item => item.permission_mark === value)
        } else {
          console.log(this.radio1)
          isRepeat = this.annu.filter(item => item.id !== this.formData.id)
            .some(item => item.permission_mark === value)
        }
        // console.log(isRepeat = this.list.filter(item => item.parent_id === this.formData.parent_id && item.id !== this.formData.id))
      } else {
      // 添加  思路： 找到当前点击部门的子部门数据； 将输入的值和这些子部门数据的name进行匹配，找到说明存在了
        isRepeat = this.list.some(item => item.permission_mark === value)
      }
      return isRepeat ? cb(new Error(`同级已经存在${value}这个名称`)) : cb()
    }
    return {
      formData: {
        icon: '',
        islink: 2,
        sort: 10,
        keepalive: 1,
        hidden: 1,
        type: 1,
        parent_id: 0,
        component: '',
        redirect: '',
        route: ''
      },
      showDialog: false,
      rules: {
        permission_name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }],
        route: [{ required: true, message: '请输入路由地址，以/开头', trigger: 'blur' }],
        permission_mark: [{ required: true, message: '格式：controller@action', trigger: 'blur' },
          { validator: checkmark, trigger: 'blur' }]
      },
      radio1: '菜单',
      list: [],
      annu: []

    }
  },
  watch: {
    // 监听页面打开和关闭
    showDialog: {
      deep: true,
      handler() {
        if (this.showDialog === false) {
          this.btnCancel()
          this.showDialog = false
        }
      }
    }
  },
  methods: {
    // 插件图标显示
    isShowfocus() {
      console.log(this.$refs.popover)
      this.$refs.popover.$el.click()
    },
    // 获取图标
    IconSelect(name) {
      this.formData.icon = name
    },
    // 关闭弹窗，清空formData
    btnCancel() {
      // this.formData = {}
      // console.log('reset')
      this.formData.permission_name = ''
      this.formData.route = ''
      this.formData.component = ''
      this.formData.icon = ''
      this.formData.redirect = ''
      this.formData.permission_mark = ''
      this.radio1 = '菜单'
      this.$refs.perForm.resetFields()
      this.$refs.perForm.clearValidate()
    },
    handleChange(value) {
      console.log(value)
    },
    // 排序
    async huoquyhxx(id) {
      // console.log(id)
      const res2 = await getInfo()
      // console.log(res2.data)
      this.list = res2.data.permission_menu_list
      this.annu = res2.data.permission_btn_list
      console.log(this.annu)
      this.formData.parent_id = id
      this.showDialog = true
    },
    // 确定点击提交
    async btnOK() {
      if (this.radio1 === '按钮') {
        this.formData.type = 2
      } else {
        this.formData.type = 1
      }
      const qwe = {
        permission_name: this.formData.permission_name,
        route: this.formData.route,
        component: this.formData.component,
        permission_mark: this.formData.permission_mark,
        icon: this.formData.icon,
        redirect: this.formData.redirect,
        islink: this.formData.islink,
        sort: this.formData.sort,
        hidden: this.formData.hidden,
        keepalive: this.formData.keepalive,
        type: this.formData.type,
        parent_id: this.formData.parent_id
      }
      if (this.radio1 === '按钮') {
        console.log('按钮')
        await addcaidanlist(qwe)
      } else {
        await addcaidanlist(qwe)
      }
      // 提示成功
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭
      this.btnCancel()
      this.showDialog = false
      // 列表更新
      this.$emit('update-list')
    }

  }
}
</script>

<style lang='scss' scoped>
.el-form-item{
  display: inline-block;
  width: 50%;
}
</style>
